<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue";
import { shopApigSkuList } from "@/api/shopApi/index";
import useOrder from "@/store/order";
import { storeToRefs } from "pinia";

const orderData = useOrder();
const { order } = storeToRefs(orderData);
const popup_specs = ref();
const props = defineProps(["id"]);

interface IState {
  list: any;
  currentInfo: any;
  num: number;
  maxOrmin: any;
}

const state = reactive<IState>({
  list: [],
  currentInfo: null,
  num: 1,
  maxOrmin: {
    max: 0,
    min: 0,
  },
});

const init = async () => {
  const { data } = await shopApigSkuList({ uuid: props?.id });
  if (data.error_code === 0 && !!data.data.length) {
    state.list = data.data;
    // 最大值
    state.maxOrmin.max = Math.max.apply(
      null,
      state.list.map(function (item: any) {
        return item.price_format;
      })
    );
    // 最小值
    state.maxOrmin.min = Math.min.apply(
      null,
      state.list.map(function (item: any) {
        return item.price_format;
      })
    );

    // 如果已选
    if (order.value.orderInfo.specs) {
      state.currentInfo = data.data[order.value.orderInfo?.specs];
    }
  }
};

const onCurrent = (info: any) => {
  // 库存不足
  if (!info.stock) {
    uni.showToast({
      title: "无库存",
      icon: "none",
    });
    return;
  }
  // 点击取消
  if (info.code === state.currentInfo?.code) return (state.currentInfo = null);
  // 选择规格
  state.currentInfo = info;
  order.value.orderInfo.specs = state.currentInfo; //存储规格
};

const onNumChange = (e: any) => (state.num = e);

onMounted(async () => {
  await init();
  // console.log(state.list);
  if (!!state.list?.length) {
    onCurrent(state.list[0]);
  }
});

const open = () => {
  popup_specs && popup_specs.value.open();
};
defineExpose({
  open,
  state,
});

const selected = computed(() => {
  return order.value.orderInfo?.specs?.title || "";
});

const price_format = computed(() => {
  if (state?.currentInfo?.price_format) {
    return state?.currentInfo?.price_format;
  } else {
    return `${state.maxOrmin.min} - ${state.maxOrmin.max}`;
  }
});

// 立即购买
const goPaly = () => {
  if (!state.currentInfo) {
    uni.showToast({
      title: "请选择规格",
      icon: "none",
    });
    return;
  }
  state.currentInfo.num = state.num; //选中数量
  order.value.orderInfo.specs = state.currentInfo; //存储规格
  uni.navigateTo({
    url: "/pages/shop/index/order_create",
  });
};
</script>

<template>
  <div class="app-container">
    <uv-cell
      :border="false"
      @click="open"
      icon="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Group2125.png"
      :isLink="true"
      :title="selected ? ` 已选 ${selected}` : '选择商品款型'"
    >
      <!-- 自定义左侧标题下面的内容 -->
      <template v-slot:label>
        <view>
          <!-- <uv-image v-for="item in state.list" class="img" radius="10px" mode="widthFix" :src="item.img_url"
                        width="100%" height="100%"></uv-image> -->
        </view>
      </template>
    </uv-cell>

    <uv-popup
      closeable
      ref="popup_specs"
      mode="bottom"
      custom-style="padding-bottom: 200rpx;"
      round="20px"
    >
      <view class="content">
        <view class="content_title">
          <uv-image
            class="content_title_img"
            radius="10px"
            :src="state?.currentInfo?.img_url"
            width="80px"
            height="80px"
          ></uv-image>
          <view class="m5_0">
            <view class="content_title_t1 priceFontB"
              >￥{{ price_format }}</view
            >
            <view class="content_title_t2 font14999">
              {{
                selected
                  ? ` 已选 ${selected}`
                  : `共${state?.list?.length}可选，请选择`
              }}
            </view>
          </view>
        </view>
        <view class="content_body">
          <view class="title font14666">款型({{ state?.list?.length }})</view>
          <view
            v-for="(item, index) in state.list"
            :key="index"
            :class="[
              'content_body_item',
              { current: state?.currentInfo?.code === item?.code },
              { notcurrent: !item?.stock },
            ]"
            @click="onCurrent(item)"
          >
            <uv-image
              class="content_title_img"
              radius="10px"
              :src="item?.img_url"
              width="30px"
              height="30px"
              customStyle="float: left"
            ></uv-image>
            <view class="s_1 font14333"> {{ item.title }}</view>
          </view>
        </view>
        <view class="content-flex">
          <view class="font14666">数量</view>
          <uv-number-box
            :disabled="!state?.currentInfo"
            bgColor="#f9f9f9"
            :max="state?.currentInfo?.stock"
            v-model="state.num"
            @change="onNumChange"
          ></uv-number-box>
        </view>
      </view>

      <view class="info_bottom">
        <view @click="goPaly" class="goPaly">立即购买</view>
      </view>
    </uv-popup>
  </div>
</template>

<style lang="scss" scoped>
.info_bottom {
  z-index: 1;
}
:deep(.uv-cell__title-text) {
  font-size: 24rpx;
}

:deep(.uv-cell__body) {
  padding: 10px 4%;
}

.notcurrent {
  color: #909399;
  border-color: #ebedf0;
}

.content-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 86px;
  left: 4%;
  right: 4%;
}

.content {
  padding: 20px 4%;

  .content_title {
    display: flex;
    // align-items: center;
  }

  .content_title_t1 {
    line-height: 45px;
  }

  .m5_0 {
    margin: 0 10px;
  }

  .title {
    padding: 20px 0;
  }

  .content_body {
    max-height: 50vh;
    overflow: auto;
  }

  .content_body_item {
    // display:flex;
    // align-items:center;
    // display: inline-block;
    display: flex;
    align-items: center;
    padding: 6px;
    background: #f9f9f9;
    border-radius: 5px;
    margin: 5px 0;
    margin-right: 20px;
    // line-height: 30px;
    // height: 30px;
    border: 1px solid #f9f9f9;
  }

  .content_title_img {
    float: left;
  }

  .s_1 {
    padding: 0 10px;
    float: left;
  }

  .current {
    border: 1px solid #ff4949;
  }
}
</style>
